<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>菩提阁</title>
    <link rel="icon" href="./../images/favico.ico">
    <script src="./../js/base.js"></script>
    <link rel="stylesheet" href="../../backend/plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../styles/vant.min.css"/>
    <link rel="stylesheet" href="../styles/index.css" />
    <link rel="stylesheet" href="./../styles/login.css" />
</head>
<body>
<div id="login" v-loading="loading">
    <div class="divHead">登录</div>
    <div class="divContainer">
        <el-input placeholder=" 请输入邮箱" v-model="form.email"  maxlength='30'/></el-input>
        <div class="divSplit"></div>
        <el-input placeholder=" 请输入验证码" v-model="form.code"  maxlength='6'/></el-input>
        <span @click='getCode' :class="{disabled: countdown > 0}">{{countdown > 0 ? `${countdown}s后重试` : '获取验证码'}}</span>
    </div>
    <div class="divMsg" v-if="msgFlag">邮箱格式不正确，请重新输入</div>
    <el-button type="primary" :class="{btnSubmit: true, btnNoEmail: !form.email, btnEmail: form.email}" @click="btnLogin">登录</el-button>
</div>
<script src="../../backend/plugins/vue/vue.js"></script>
<script src="../../backend/plugins/element-ui/index.js"></script>
<script src="./../js/vant.min.js"></script>
<script src="../../backend/plugins/axios/axios.min.js"></script>
<script src="./../js/request.js"></script>
<script src="./../api/login.js"></script>
</body>
<script>
    new Vue({
        el:"#login",
        data(){
            return {
                form:{
                    email:'', // 修正为正确的email
                    code:''
                },
                msgFlag:false,
                loading:false,
                countdown: 0 // 新增倒计时变量
            }
        },
        methods:{
            async getCode(){
                this.form.code = ''
                this.msgFlag = false

                // 邮箱格式验证
                const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
                if (!regex.test(this.form.email)) {
                    this.msgFlag = true
                    return
                }

                // 防止重复点击
                if (this.countdown > 0) return

                try {
                    // 设置倒计时
                    this.countdown = 60
                    const timer = setInterval(() => {
                        this.countdown--
                        if (this.countdown <= 0) {
                            clearInterval(timer)
                        }
                    }, 1000)

                    // 发送请求 (修正为正确的email)
                    const res = await sendMsgApi({email: this.form.email})

                    // 处理响应
                    if (res.code !== 1) {
                        this.$notify({ type:'warning', message: res.msg || '发送验证码失败'})
                        clearInterval(timer)
                        this.countdown = 0
                    }
                } catch (error) {
                    console.error('获取验证码出错:', error)
                    this.$notify({ type:'error', message: '网络错误，请稍后重试'})
                    this.countdown = 0
                }
            },
            async btnLogin(){
                if(this.form.email && this.form.code){
                    this.loading = true
                    try {
                        // 修正为正确的email
                        const res = await loginApi({email: this.form.email, code: this.form.code})

                        if(res.code === 1){
                            sessionStorage.setItem("userEmail", this.form.email) // 修正为正确的email
                            window.location.href = '/front/index.html'
                        } else {
                            this.$notify({ type:'warning', message: res.msg || '登录失败'})
                        }
                    } catch (error) {
                        console.error('登录出错:', error)
                        this.$notify({ type:'error', message: '网络错误，请稍后重试'})
                    } finally {
                        this.loading = false
                    }
                } else {
                    this.$notify({ type:'warning', message: '请输入邮箱和验证码'})
                }
            }
        }
    })
</script>
</html>